<template>
    <div>
        <div class="panel panel-default panel-search">
            <el-form :inline="true">
                <el-form-item label="编码">
                    <el-input v-model="page.query.param.code" clearable></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="page.query.param.name" clearable></el-input>
                </el-form-item>

                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="cancel">取消</el-button>
                <!--<el-button plain @click="exportRecords">导出 XLS</el-button>-->
                <el-button
                    style="margin-top: 5px; margin-left: 20px"
                    type="primary"
                    plain
                    @click="create"
                >新增
                </el-button
                >
            </el-form>
        </div>
        <!-- <v-toolbar title="基础配置 " style="color: rebeccapurple" type="alert">
          <el-button
            slot="tip"
            style="margin-top: 5px; margin-left: 20px"
            type="primary"
            plain
            @click="create"
            >新增</el-button   >
        </v-toolbar> -->

        <v-table
            ref="table"
            :dblclick="edit"
            :page="page"
            :table-minheight="450"
            @dataloaded="onDataloaded"
        >

            <el-table-column prop="department" label="上级部门" width="100">
                <template slot-scope="{ row }">
                    {{ row.parentDptName||'-' }}
                </template>
            </el-table-column>
            <el-table-column prop="code" :sortable="false" label="编码" width="100">
                <template slot-scope="{ row }">
                    {{ row.id }}
                </template>
            </el-table-column>
            <el-table-column
                prop="name"
                :sortable="false"
                label="部门名称"
                width="100"
            >
                <template slot-scope="{ row }">
                    {{ row.name }}
                </template>
            </el-table-column>
            <el-table-column
                prop="leader"
                :sortable="false"
                label="负责人"
                width="100">
                <template slot-scope="{ row }"> {{ row.leader }}</template>
            </el-table-column>
            <el-table-column prop="type" :sortable="false" label="类型" width="100">
                <template slot-scope="{ row }">
                    {{ DICT.TYPE[row.type] }}
                </template>
            </el-table-column>
            <el-table-column
                prop="enabled"
                :sortable="false"
                label="有效"
                width="100"
            >
                <template slot-scope="{ row }">
          <span :style="row.enabled ? 'color:red' : 'color:black'">
            {{ row.enabled ? "是" : "否" }}
          </span>
                </template>
            </el-table-column>
            <el-table-column width="80" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" title="编辑" @click="edit(scope.row)">
                        <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button
                        type="text"
                        @click="del(scope.row, scope.$index)"
                        title="删除"
                    >
                        <span style="color: red"> <i class="el-icon-delete red"></i></span>
                    </el-button>
                </template>
            </el-table-column>
        </v-table>
        <v-dialog ref="formDiag" :width="'45%'" title="信息编辑">
            <form-panel @saved="onFormSaved"></form-panel>
            <div slot="footer" style="margin-right: 40px">
                <el-button type="primary" @click="$refs.formDiag.dispatch('submit')"
                >保存
                </el-button
                >
                <el-button
                    type="default"
                    @click="
            () => {
              $refs.formDiag.hide();
            }
          "
                >取消
                </el-button
                >
            </div>
        </v-dialog>
    </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
.el-input {
    width: 160px;
}

.status_green {
    color: red;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409eff;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>

<script>
//import CustomerSelect from '@/components/widgets/dongxw/CustomerSelect.vue';

import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";
import FormPanel from "./Form";

export default {
    components: {DepartmentSelect, FormPanel},
    data() {
        return {
            dateRange: [],
            DICT: {
                TYPE: {
                    0: "0--部门",
                    1: "1--班组",
                },
            },
            summaryMap: {},
            pageNum: 1,
            page: {
                query: {
                    orderBys: "parentId|asc,id|asc",
                    param: {
                        isDeleted: false,
                    },
                },
                getData: this.$api.hr.DepartmentService.query,
            },
            tableActions: [
                {
                    name: '编辑',
                    handle: this.edit,
                },
                {
                    name: "删除",
                    handle: this.del,
                    style: "color:red",
                },
            ],
        };
    },
    computed: {},

    methods: {
        handleCommand(command) {
            this.page.query.orderBys = command;
            this.search();
        },
        calCbm(val) {
            return 0;
        },
        onDataloaded(rsp) {
        },
        /*
                导出
                 */
        exportRecords() {
            let params = this.getSearchParams();
            this.$api.hr.DepartmentService.export(params);
        },
        getSearchParams() {
            this.page.query.dateRanges = {};
            if (this.dateRange && this.dateRange.length > 0) {
                this.page.query.dateRanges["holiday"] = {
                    startDate: this.dateRange[0],
                    endDate: this.dateRange.length > 1 ? this.dateRange[1] : null,
                };
            }
            return this.page.query;
        },
        create() {
            this.$refs.formDiag.show();
        },
        edit(row) {
            this.$refs.formDiag.show({id: row.id});
        },
        toggleStatus(row) {
        },
        del(row) {
            this.$confirm("确定删除此条记录吗?", "提示", {
                type: "warning",
            }).then(() => {
                this.$api.hr.DepartmentService.deleteById(row.id).then((rsp) => {
                    this.$msgJsonResult(rsp);
                    if (rsp.code === 200) {

                        this.search();
                    }
                });
            });
        },
        onFormSaved() {
            this.$refs.formDiag.hide();
            this.$nextTick(this.search);
        },
        init(options = {}) {
            this.search();
        },
        search() {
            this.$refs.table.pageNum = 1;
            this.getSearchParams();
            this.$refs.table.load();
        },
        cancel() {
            this.dateRange = [];
            this.page.query.param = {prdFlag: 0};
            this.search();
        },
    },
    created() {
    },
    mounted() {
        this.$on("init", this.init);
    },
};
</script>
